<template>
    <div class="error-container">
      <el-card class="error-card">
        <div class="error-content">
          <div class="error-icon">
            <el-icon color="#909399" :size="100"><Warning /></el-icon>
          </div>
          <h1 class="error-code">404</h1>
          <h2 class="error-message">页面不存在</h2>
          <p class="error-description">您访问的页面可能已被删除或暂时不可用</p>
          <div class="action-buttons">
            <el-button type="primary" @click="goHome">返回首页</el-button>
            <el-button @click="goBack">返回上一页</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { Warning } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  
  const router = useRouter()
  
  const goHome = () => {
    router.push('/dashboard')
  }
  
  const goBack = () => {
    router.go(-1)
  }
  </script>
  
  <style scoped>
  /* 复用403页面的样式 */
  .error-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f9;
  }
  
  .error-card {
    width: 600px;
    padding: 40px;
  }
  
  .error-content {
    text-align: center;
  }
  
  .error-icon {
    margin-bottom: 20px;
  }
  
  .error-code {
    font-size: 80px;
    color: #909399;
    margin: 10px 0;
  }
  
  .error-message {
    color: #606266;
    margin: 10px 0;
  }
  
  .error-description {
    color: #909399;
    font-size: 14px;
    margin-bottom: 30px;
  }
  
  .action-buttons {
    margin-top: 20px;
  }
  </style>